<template>
  <div class="content">
    <div class="login-content">
      <a class="banner-box" href="" />
      <div class="login-box">
        <h1>CocoPolaris</h1>
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="demo-form-inline">
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="用户名" />
          </el-form-item>
          <el-form-item>
            <el-button class="login-btn" type="primary" @click="handleLogin">进入</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import Config from '@/settings'
import Cookies from 'js-cookie'
import qs from 'qs'
import { encrypt } from '@/utils/rsaEncrypt'

export default {
  name: 'Login',
  data() {
    return {
      cookiePass: '',
      loginForm: {
        username: '',
        password: '123456',
        rememberMe: false
      },
      loginRules: {
        username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
        password: [{ required: true, min: 3, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }]
      },
      loading: false,
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const data = route.query
        if (data && data.redirect) {
          this.redirect = data.redirect
          delete data.redirect
          if (JSON.stringify(data) !== '{}') {
            this.redirect = this.redirect + '&' + qs.stringify(data, { indices: false })
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        const user = {
          username: this.loginForm.username,
          password: this.loginForm.password,
          rememberMe: this.loginForm.rememberMe
        }
        if (user.password !== this.cookiePass) {
          user.password = encrypt(user.password)
        }
        if (valid) {
          if (user.rememberMe) {
            Cookies.set('username', user.username, { expires: Config.passCookieExpires })
            Cookies.set('password', user.password, { expires: Config.passCookieExpires })
            Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires })
          } else {
            Cookies.remove('username')
            Cookies.remove('password')
            Cookies.remove('rememberMe')
          }

          // loginFuc(this.loginForm)
          // this.$store.dispatch('initData')
          // this.$router.push('/home/chat')
          this.$store.dispatch('Login', user).then(() => {
            this.$router.push('/home/chat')
            // this.$router.push({ path: this.redirect || '/' })
          }).catch(() => {

          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    point() {
      const point = Cookies.get('point') !== undefined
      if (point) {
        this.$notify({
          title: '提示',
          message: '当前登录状态已过期，请重新登录！',
          type: 'warning',
          duration: 5000
        })
        Cookies.remove('point')
      }
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.content {
  width: 100vw;
  height: 100vh;
  /* background-color: aqua; */
  /*background: url(../../../static/css/bg.jpg) no-repeat;*/
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-content {
  position: relative;
  width: 800px;
  height: 360px;
  background-color: rgb(52, 0, 73);
  border-radius: 30px;
  padding: 30px;
}

.banner-box {
  display: inline-block;
  width: 500px;
  height: 100%;
  /* background-color: rgb(0, 92, 92); */
  background: url(../../../public/style/css/bg.jpg) no-repeat;
  background-size: cover;
  border-radius: 20px 0 0 20px;
}

.login-box {
  width: 340px;
  height: 100%;
  /*background-color: rgb(172, 106, 26);*/
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0 30px 30px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-box > h1 {
  font-size: 36px;
  margin: 60px 0;
  color: #fff;
}

.login-box > input {
  margin-bottom: 20px;
  width: 200px;
  height: 36px;
  padding: 0 20px;
  border-radius: 36px;
  border: none;
  outline: none;
  font-size: 18px;
}

.login-btn {
  display: block;
  margin: 0 auto;
  border-radius: 30px;
  width: 70px;
  height: 40px;
  margin-top: 20px;
  /*margin-top: 20px;*/
  /*width: 70px;*/
  /*height: 40px;*/
  /*!*background-color: rgb(122, 0, 223);*!*/
  /*border: none;*/
  /*border-radius: 40px;*/
  /*!*color: #fff;*!*/
  /*font-size: 18px;*/
}

@media screen and (max-width: 900px) {
  .login-content {
    margin: 0 30px;
  }

  .banner-box {
    border-radius: 20px;
  }

  .login-box {
    background-color: rgba(52, 0, 73, 0.5);
  }
}

@media screen and (max-width: 600px) {
  .content {
    background: url(../../../public/style/css/bg.jpg) no-repeat center;
  }

  .login-content {
    background-color: rgba(52, 0, 73, 0);
  }

  .banner-box {
    display: none;
  }

  .login-box {
    position: initial;
    margin: -40px auto;
    background-color: rgba(52, 0, 73, 0);
  }
}

</style>
